@use "../mixins/mixins.scss" as *;

/*
  覆盖 element-plus 默认样式
*/
@include b("override") {
  @include e("element") {
    @include m("plus") {
      .el-input {
        --el-input-width: 11.25rem;
        --el-date-editor-width: 6.25rem;
      }
      .el-checkbox {
        margin-left: 0.5rem;
        vertical-align: middle;
      }
    }
  }
}

/*
  覆盖 quill snow 默认样式
*/

@include b("override") {
  @include e("quill") {
    @include m("snow") {
      display: flex;
      flex-direction: column;
      border: 1px solid #ddd;
      overflow: hidden; //用于避免内部元素覆盖圆角边框
      @apply mb-3 rounded-xl;
      &:hover {
        border-color: #c0c4cc;
      }
      &:focus-within {
        //内部元素获取焦点时，改变边框颜色
        border-color: #409eff;
      }
      .ql-container {
        flex: 1;
        overflow-y: auto;
        padding-bottom: 1em; //滚动条总是不能够触底,因此需要设置该样式，以使最后一行的输入能够完全显示
      }

      .ql-container.ql-snow {
        //.ql-snow用于提升优先级
        border: none; //覆盖默认边框，避免双重边框
      }
      .ql-editor {
        border-top: 1px solid #ddd; //为toolbar 与 editor 之间添加上边界，以更好的对它们进行区分
        @apply min-h-[8rem];
        &.ql-blank::before {
          font-style: normal; //默认样式的 placeholder 部分是倾斜的，覆盖它，使其不再倾斜
        }
        ul,
        ol {
          padding-left: 0;
        }
      }

      .ql-snow {
        &.ql-toolbar {
          border: none;
          background-color: #f8f8f8;
          @apply py-1 px-2;
          &:after {
            color: #999;
            display: inline-block;
            vertical-align: middle;
            content: "功能提示：使用工具栏之前，需要先选中输入框文字";
            @apply px-2; /* 为了使其换行后，与上一行对齐 */
          }
        }
        .ql-picker.ql-size {
          .ql-picker-label::before {
            content: "字体大小";
          }
          .ql-picker-item[data-value="small"]::before {
            content: "小号";
          }
          .ql-picker-item::before {
            content: "默认";
          }
          .ql-picker-item[data-value="large"]::before {
            content: "大号";
          }
          .ql-picker-item[data-value="huge"]::before {
            content: "超大号";
          }
        }
      }
    }
    /*
      专用于 ReadOnlyRichText
    */
    @include m("read-only") {
      .ql-container.ql-snow {
        border: none;
      }
      .ql-editor {
        padding: 0;
        ul,
        ol {
          padding-left: 0;
        }
      }
    }
  }
}
.el-dialog__body.el-dialog__body {
  padding-top: 0.25rem;
  padding-bottom: 1rem;
}
